<template>
  <div class="menu-tree-node">
    <span class="item-box">
      <el-checkbox v-model="value" size="large" @click="onCheckbox(node.id)">
        <template #default>
          <span>{{ node.label }}</span>
          <span style="margin-left: 3px;margin-bottom: 3px;">
              <status-tag v-if="node.type === 'M'" title="目录" />
              <status-tag v-else-if="node.type === 'C'" title="菜单" />
              <status-tag v-else-if="node.type === 'F'" title="按钮" />
          </span>
        </template>
      </el-checkbox>
    </span>
    <span>
      <MenuTreeNode v-for="childNode in node.children" :key="childNode.id" :checkedKeys="checkedKeys" :node="childNode" @change="onChange" />
    </span>
  </div>
  <el-divider v-if="divider" />
</template>

<script setup>
import MenuTreeNode from './MenuTreeNode.vue'
import { computed, defineProps, defineEmits, nextTick } from 'vue'
// props
const { node, divider, checkedKeys } = defineProps({
  node: {
    type: Object,
    required: true,
  },
  checkedKeys: {
    type: Array,
    required: true,
    default: () => [],
  },
  divider: {
    type: Boolean,
    default: false,
  },
})
// emit
const emit = defineEmits(['change'])
// 计算属性
const value = computed(() => {
  return !!checkedKeys.find(val => val === node.id)
})
const showValue = ref(true)
const onCheckbox = (id) => {
  const index = checkedKeys.indexOf(id);
  if(!showValue.value) return
  showValue.value = false
  setTimeout(() => {
    showValue.value = true
  }, 100)
  nextTick(()=>{
    if (index !== -1) {
      console.log(1)
      checkedKeys.splice(index, 1);
    } else {
      console.log(2)
      checkedKeys.push(id);
    }
  })
  onChange(checkedKeys);
}
const onChange = (e) => {
  emit('change', e)
}
</script>
<style lang="scss" scoped>
.menu-tree-node {
  display: flex;
  .item-box {
    width: 300px;
  }
}
</style>